<template>
  <div class="dashboard-container">
    <!-- 顶部导航 -->
    <div class="dashboard-header">
      <div class="header-left">
        <h1 class="dashboard-title">数据仪表盘</h1>
        <div class="dashboard-subtitle">实时监控数据趋势与关键指标</div>
      </div>
      <div class="header-right">
        <div class="date-selector">
          <el-select v-model="dateRange" size="small">
            <el-option label="今日" value="today" />
            <el-option label="本周" value="week" />
            <el-option label="本月" value="month" />
            <el-option label="全年" value="year" />
            <el-option label="自定义" value="custom" />
          </el-select>
          <el-date-picker
            v-if="dateRange === 'custom'"
            v-model="customDateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          />
        </div>
        <el-button type="primary" size="small" @click="refreshData" class="refresh-btn">
          <el-icon><RefreshRight /></el-icon>
          <span>刷新数据</span>
        </el-button>
      </div>
    </div>

    <!-- 核心数据概览 -->
    <div class="stats-grid">
      <div class="stat-card stat-blue">
        <div class="stat-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-label">总访问量</div>
          <div class="stat-value">{{ formatNumber(totalVisits) }}</div>
          <div class="stat-trend">
            <el-icon><Top /></el-icon>
            <span class="trend-value">+{{ Math.abs(visitTrend) }}%</span>
          </div>
        </div>
      </div>

      <div class="stat-card stat-purple">
        <div class="stat-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-label">文章总数</div>
          <div class="stat-value">{{ formatNumber(totalArticles) }}</div>
          <div class="stat-trend">
            <el-icon><Top /></el-icon>
            <span class="trend-value">+{{ Math.abs(articleTrend) }}%</span>
          </div>
        </div>
      </div>

      <div class="stat-card stat-green">
        <div class="stat-icon">
          <el-icon><ChatLineRound /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-label">评论总数</div>
          <div class="stat-value">{{ formatNumber(totalComments) }}</div>
          <div class="stat-trend">
            <el-icon><Top /></el-icon>
            <span class="trend-value">+{{ Math.abs(commentTrend) }}%</span>
          </div>
        </div>
      </div>

      <div class="stat-card stat-orange">
        <div class="stat-icon">
          <el-icon><Star /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-label">活跃用户</div>
          <div class="stat-value">{{ formatNumber(activeUsers) }}</div>
          <div class="stat-trend">
            <el-icon><Top /></el-icon>
            <span class="trend-value">+{{ Math.abs(userTrend) }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主图表区域 -->
    <div class="main-charts">
      <div class="chart-container">
        <div class="chart-header">
          <h3>访问趋势</h3>
          <div class="chart-actions">
            <el-radio-group v-model="chartType" size="small">
              <el-radio-button label="day">日</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="month">月</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="chart-content" ref="visitChartRef"></div>
      </div>
      <div class="chart-container">
        <div class="chart-header">
          <h3>用户地域分布</h3>
        </div>
        <div class="chart-content" ref="userChartRef"></div>
      </div>
    </div>

    <!-- 热门文章和用户画像 -->
    <div class="secondary-data">
      <div class="popular-articles">
        <div class="data-header">
          <h3>热门内容</h3>
          <el-button type="text" size="small">查看全部</el-button>
        </div>
        <div class="articles-list">
          <div v-for="(article, index) in popularArticles" :key="index" class="article-item">
            <div class="article-rank">{{ article.rank }}</div>
            <div class="article-info">
              <div class="article-title">{{ article.title }}</div>
              <div class="article-metrics">
                <div class="metric"><el-icon><View /></el-icon> {{ formatNumber(article.views) }}</div>
                <div class="metric"><el-icon><Star /></el-icon> {{ formatNumber(article.likes) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="user-insights">
        <div class="data-header">
          <h3>用户画像</h3>
        </div>
        <div class="insights-grid">
          <div class="insight-card">
            <div class="insight-label">性别比例</div>
            <div class="insight-chart" ref="genderChartRef"></div>
          </div>
          <div class="insight-card">
            <div class="insight-label">年龄分布</div>
            <div class="insight-chart" ref="ageChartRef"></div>
          </div>
          <div class="insight-card">
            <div class="insight-label">访问设备</div>
            <div class="insight-chart" ref="deviceChartRef"></div>
          </div>
          <div class="insight-card">
            <div class="insight-label">访问时段</div>
            <div class="insight-chart" ref="timeChartRef"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 排序管理模块（参考您上传的图片） -->
    <div class="sorting-section">
      <div class="data-header">
        <h3>内容排序</h3>
        <el-button type="primary" size="small" @click="addSortItem">
          <el-icon><Plus /></el-icon>
          添加项目
        </el-button>
      </div>
      <div class="sort-table">
        <div class="table-header">
          <div class="header-col">排序</div>
          <div class="header-col">项目名称</div>
          <div class="header-col">操作</div>
        </div>
        <div class="table-body">
          <div v-for="(item, index) in sortItems" :key="index" class="table-row">
            <div class="row-col sort-index">
              <span class="index-number">{{ index + 1 }}</span>
              <div class="sort-arrows">
                <el-button v-if="index > 0" size="small" circle @click="moveItemUp(index)">
                  <el-icon><Top /></el-icon>
                </el-button>
                <el-button v-if="index < sortItems.length - 1" size="small" circle @click="moveItemDown(index)">
                  <el-icon><Bottom /></el-icon>
                </el-button>
              </div>
            </div>
            <div class="row-col item-name">
              {{ item.name }}
            </div>
            <div class="row-col item-actions">
              <el-button type="danger" size="small" circle @click="removeSortItem(index)">
                <el-icon><Minus /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { 
  User, Document, ChatLineRound, Star, View,
  RefreshRight, Top, Bottom, Minus, Plus
} from '@element-plus/icons-vue'

// 日期选择
const dateRange = ref('week')
const customDateRange = ref(null)

// 图表相关
const chartType = ref('week')
const visitChartRef = ref(null)
const userChartRef = ref(null)
const genderChartRef = ref(null)
const ageChartRef = ref(null)
const deviceChartRef = ref(null)
const timeChartRef = ref(null)
let visitChartInstance = null
let userChartInstance = null
let genderChartInstance = null
let ageChartInstance = null
let deviceChartInstance = null
let timeChartInstance = null

// 统计数据
const totalVisits = ref(125800)
const totalArticles = ref(156)
const totalComments = ref(3258)
const activeUsers = ref(5890)
const visitTrend = ref(12.5)
const articleTrend = ref(8.3)
const commentTrend = ref(15.7)
const userTrend = ref(6.2)

// 排序管理
const sortItems = ref([
  { id: 1, name: '产品经理 桌面端' },
  { id: 2, name: '设计资源 移动端' },
  { id: 3, name: '开发工具 桌面端' },
  { id: 4, name: '测试平台 Web端' },
  { id: 5, name: '运维管理 桌面端' }
])

// 热门文章
const popularArticles = ref([
  { rank: 1, title: 'Vue3组合式API完全指南', views: 12580, likes: 356 },
  { rank: 2, title: 'Element Plus组件最佳实践', views: 9850, likes: 289 },
  { rank: 3, title: 'TypeScript高级类型技巧', views: 8762, likes: 245 },
  { rank: 4, title: 'Node.js后端开发实战', views: 7632, likes: 210 },
  { rank: 5, title: 'MySQL性能优化指南', views: 6541, likes: 189 }
])

// 格式化数字
const formatNumber = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}

// 刷新数据
const refreshData = () => {
  // 模拟数据刷新 - 在实际应用中替换为API调用
  totalVisits.value = Math.floor(totalVisits.value * (1 + Math.random() * 0.2))
  activeUsers.value = Math.floor(activeUsers.value * (1 + Math.random() * 0.1))
  
  // 更新所有图表
  renderCharts()
}

// 初始化图表
const initCharts = () => {
  if (visitChartRef.value) visitChartInstance = echarts.init(visitChartRef.value)
  if (userChartRef.value) userChartInstance = echarts.init(userChartRef.value)
  if (genderChartRef.value) genderChartInstance = echarts.init(genderChartRef.value)
  if (ageChartRef.value) ageChartInstance = echarts.init(ageChartRef.value)
  if (deviceChartRef.value) deviceChartInstance = echarts.init(deviceChartRef.value)
  if (timeChartRef.value) timeChartInstance = echarts.init(timeChartRef.value)
  
  renderCharts()
}

// 渲染所有图表
const renderCharts = () => {
  // 访问趋势图
  if (visitChartInstance) {
    visitChartInstance.setOption({
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(30, 34, 50, 0.8)',
        borderColor: 'rgba(255, 255, 255, 0.1)',
        textStyle: { color: '#fff' }
      },
      grid: {
        left: 40,
        right: 20,
        top: 30,
        bottom: 30
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { color: '#7C8EA6' }
      },
      yAxis: {
        type: 'value',
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.05)' } },
        axisLabel: { color: '#7C8EA6' }
      },
      series: [{
        name: '访问量',
        type: 'line',
        smooth: true,
        data: [8520, 9340, 8920, 10560, 9870, 11240, 12250],
        lineStyle: { 
          width: 3,
          color: '#3A8EED'
        },
        itemStyle: { 
          color: '#3A8EED',
          borderColor: '#F1F7FF',
          borderWidth: 2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(58, 142, 237, 0.5)' },
            { offset: 1, color: 'rgba(58, 142, 237, 0.1)' }
          ])
        }
      }]
    })
  }

  // 用户分布图
  if (userChartInstance) {
    userChartInstance.setOption({
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(30, 34, 50, 0.8)',
        borderColor: 'rgba(255, 255, 255, 0.1)',
        textStyle: { color: '#fff' }
      },
      grid: {
        left: 40,
        right: 20,
        top: 30,
        bottom: 30
      },
      xAxis: {
        type: 'category',
        data: ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉'],
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { 
          color: '#7C8EA6',
          interval: 0,
          rotate: 0
        }
      },
      yAxis: {
        type: 'value',
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.05)' } },
        axisLabel: { color: '#7C8EA6' }
      },
      series: [{
        type: 'bar',
        data: [12500, 10300, 9800, 9200, 7850, 6340, 5120],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#5B7BFF' },
            { offset: 1, color: '#42A2F6' }
          ]),
          borderRadius: [2, 2, 0, 0]
        },
        barWidth: 20
      }]
    })
  }

  // 性别分布饼图
  if (genderChartInstance) {
    genderChartInstance.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
      },
      series: [{
        type: 'pie',
        radius: ['45%', '70%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#192238',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold',
            color: '#fff'
          }
        },
        data: [
          { value: 68, name: '男性', itemStyle: { color: '#5B7BFF' } },
          { value: 32, name: '女性', itemStyle: { color: '#8B61FF' } }
        ]
      }]
    })
  }

  // 年龄分布图
  if (ageChartInstance) {
    ageChartInstance.setOption({
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(30, 34, 50, 0.8)',
        borderColor: 'rgba(255, 255, 255, 0.1)',
        textStyle: { color: '#fff' }
      },
      grid: {
        left: 0,
        right: 0,
        top: 10,
        bottom: 0,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['18-24', '25-30', '31-35', '36-40', '41+'],
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { color: '#7C8EA6', fontSize: 10 }
      },
      yAxis: {
        type: 'value',
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false }
      },
      series: [{
        data: [15, 38, 24, 16, 7],
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#3A8EED' },
            { offset: 1, color: '#42BFF6' }
          ])
        }
      }]
    })
  }

  // 设备分布图
  if (deviceChartInstance) {
    deviceChartInstance.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
      },
      series: [{
        type: 'pie',
        radius: ['45%', '70%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#192238',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold',
            color: '#fff'
          }
        },
        data: [
          { value: 55, name: '移动端', itemStyle: { color: '#8B61FF' } },
          { value: 42, name: '桌面端', itemStyle: { color: '#5B7BFF' } },
          { value: 3, name: '其他', itemStyle: { color: '#42BFF6' } }
        ]
      }]
    })
  }

  // 访问时间分布
  if (timeChartInstance) {
    timeChartInstance.setOption({
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(30, 34, 50, 0.8)',
        borderColor: 'rgba(255, 255, 255, 0.1)',
        textStyle: { color: '#fff' }
      },
      grid: {
        left: 30,
        right: 10,
        top: 10,
        bottom: 30
      },
      xAxis: {
        type: 'category',
        data: ['0-3', '3-6', '6-9', '9-12', '12-15', '15-18', '18-21', '21-24'],
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { color: '#7C8EA6', fontSize: 10 }
      },
      yAxis: {
        type: 'value',
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { color: '#7C8EA6', fontSize: 10 }
      },
      series: [{
        data: [8, 3, 12, 24, 18, 26, 34, 18],
        type: 'line',
        smooth: true,
        lineStyle: { 
          width: 3,
          color: '#3A8EED'
        },
        itemStyle: { 
          color: '#3A8EED',
          borderColor: '#192238',
          borderWidth: 2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(58, 142, 237, 0.3)' },
            { offset: 1, color: 'rgba(58, 142, 237, 0.05)' }
          ])
        }
      }]
    })
  }
}

// 排序管理方法
const moveItemUp = (index) => {
  if (index > 0) {
    const item = sortItems.value[index]
    sortItems.value.splice(index, 1)
    sortItems.value.splice(index - 1, 0, item)
  }
}

const moveItemDown = (index) => {
  if (index < sortItems.value.length - 1) {
    const item = sortItems.value[index]
    sortItems.value.splice(index, 1)
    sortItems.value.splice(index + 1, 0, item)
  }
}

const removeSortItem = (index) => {
  sortItems.value.splice(index, 1)
}

const addSortItem = () => {
  const newItem = {
    id: sortItems.value.length + 1,
    name: '新项目'
  }
  sortItems.value.push(newItem)
}

// 组件挂载时初始化图表
onMounted(() => {
  initCharts()
  
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    if (visitChartInstance) visitChartInstance.resize()
    if (userChartInstance) userChartInstance.resize()
    if (genderChartInstance) genderChartInstance.resize()
    if (ageChartInstance) ageChartInstance.resize()
    if (deviceChartInstance) deviceChartInstance.resize()
    if (timeChartInstance) timeChartInstance.resize()
  })
})
</script>

<style scoped lang="scss">
$dark-bg: #0F1728;
$card-bg: #192238;
$primary: #3A8EED;
$accent: #8B61FF;
$text-main: #FFFFFF;
$text-secondary: #7C8EA6;
$border-color: rgba(255, 255, 255, 0.1);

.dashboard-container {
  background-color: $dark-bg;
  min-height: 100vh;
  padding: 20px;
  color: $text-main;
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
  overflow-y: scroll;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header-left {
  .dashboard-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  
  .dashboard-subtitle {
    font-size: 14px;
    color: $text-secondary;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
  
  .date-selector {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .refresh-btn {
    background: linear-gradient(45deg, $primary, #42BFF6);
    border: none;
    font-weight: 500;
    
    &:hover {
      opacity: 0.9;
    }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: $card-bg;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
  }
  
  .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 24px;
    
    .el-icon {
      color: white;
    }
  }
  
  .stat-info {
    .stat-label {
      font-size: 14px;
      color: $text-secondary;
      margin-bottom: 8px;
    }
    
    .stat-value {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 5px;
    }
    
    .stat-trend {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #42D392;
      
      .el-icon {
        margin-right: 5px;
      }
    }
  }
}

// 卡片颜色
.stat-blue {
  background: linear-gradient(45deg, #1E3855, #1C3D68);
  
  .stat-icon {
    background: linear-gradient(135deg, $primary, #42BFF6);
  }
}

.stat-purple {
  background: linear-gradient(45deg, #2A1A4D, #3B2565);
  
  .stat-icon {
    background: linear-gradient(135deg, $accent, #AF88FF);
  }
}

.stat-green {
  background: linear-gradient(45deg, #1A3B37, #1E4D4C);
  
  .stat-icon {
    background: linear-gradient(135deg, #42D392, #5AEFA7);
  }
}

.stat-orange {
  background: linear-gradient(45deg, #3D291F, #4C3528);
  
  .stat-icon {
    background: linear-gradient(135deg, #F39C12, #FFC05A);
  }
}

.main-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.chart-container {
  background: $card-bg;
  border-radius: 10px;
  padding: 20px;
  
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h3 {
      font-size: 16px;
      font-weight: 600;
    }
  }
  
  .chart-content {
    height: 300px;
    width: 100%;
  }
}

.secondary-data {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  margin-bottom: 30px;
}

.popular-articles, .user-insights {
  background: $card-bg;
  border-radius: 10px;
  padding: 20px;
}

.data-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
  h3 {
    font-size: 16px;
    font-weight: 600;
  }
  
  .el-button {
    color: $primary;
    font-weight: 500;
  }
}

.articles-list {
  .article-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid $border-color;
    
    &:last-child {
      border-bottom: none;
    }
    
    .article-rank {
      width: 28px;
      height: 28px;
      background: linear-gradient(135deg, $accent, #AF88FF);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      margin-right: 15px;
      
      &:nth-child(1) {
        background: linear-gradient(135deg, #F39C12, #FFC05A);
      }
      &:nth-child(2) {
        background: linear-gradient(135deg, #42D392, #5AEFA7);
      }
      &:nth-child(3) {
        background: linear-gradient(135deg, #5B7BFF, #42A2F6);
      }
    }
    
    .article-info {
      flex: 1;
      
      .article-title {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 6px;
      }
      
      .article-metrics {
        display: flex;
        gap: 15px;
        font-size: 12px;
        color: $text-secondary;
        
        .metric {
          display: flex;
          align-items: center;
          
          .el-icon {
            margin-right: 5px;
            font-size: 12px;
          }
        }
      }
    }
  }
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.insight-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 15px;
  
  .insight-label {
    font-size: 13px;
    color: $text-secondary;
    margin-bottom: 10px;
  }
  
  .insight-chart {
    height: 130px;
    width: 100%;
  }
}

// 排序管理模块 - 参考您上传的图片样式
.sorting-section {
  background: $card-bg;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.sort-table {
  border: 1px solid $border-color;
  border-radius: 8px;
  overflow: hidden;
}

.table-header {
  display: flex;
  background: rgba(58, 142, 237, 0.1);
  border-bottom: 1px solid $border-color;
  
  .header-col {
    padding: 12px 15px;
    font-weight: 500;
    font-size: 14px;
    
    &:first-child {
      width: 25%;
      border-right: 1px solid $border-color;
    }
    &:nth-child(2) {
      width: 55%;
      border-right: 1px solid $border-color;
    }
    &:last-child {
      width: 20%;
    }
  }
}

.table-body {
  .table-row {
    display: flex;
    border-bottom: 1px solid $border-color;
    
    &:last-child {
      border-bottom: none;
    }
    
    .row-col {
      padding: 15px;
      
      &:first-child {
        width: 25%;
        border-right: 1px solid $border-color;
      }
      &:nth-child(2) {
        width: 55%;
        border-right: 1px solid $border-color;
      }
      &:last-child {
        width: 20%;
      }
    }
  }
}

.sort-index {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  .index-number {
    font-size: 16px;
    font-weight: 600;
  }
  
  .sort-arrows {
    display: flex;
    gap: 5px;
    
    .el-button {
      width: 28px;
      height: 28px;
      padding: 0;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      
      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
      
      .el-icon {
        font-size: 14px;
      }
    }
  }
}

.item-name {
  font-weight: 500;
}

.item-actions {
  .el-button {
    padding: 6px;
    background: rgba(235, 87, 87, 0.2);
    
    &:hover {
      background: rgba(235, 87, 87, 0.3);
    }
  }
}
.dashboard-container::-webkit-scrollbar {
  width: 8px;
}

.dashboard-container::-webkit-scrollbar-track {
  background: #192238;
}

.dashboard-container::-webkit-scrollbar-thumb {
  background-color: #3A8EED;
  border-radius: 4px;
}
</style>